<template>
    <div class="privacy">
      <div class="head">
        <div class="icon"></div>
        <div class="title">数据与隐私</div>
      </div>
      <div class="content">
        <div class="content-item">
          <div class="title2">备课数据存储管理</div>
          <div class="details">
            <label :class="{'save': form.save === 'yes', 'no-save': form.save!== 'yes'}">
              <input type="radio" name="save" v-model="form.save" value="yes" hidden>
              存储我的备课数据
            </label>
            <label :class="{'save': form.save === 'no', 'no-save': form.save!== 'no'}">
              <input type="radio" name="save" v-model="form.save" value="no" hidden>
              不存储备课数据
            </label>
            <div class="prompt">“您的 AI 备课记录将被保存，方便下次复用或优化”</div>
          </div>
        </div>
        <div class="content-item">
          <div class="title2">AI推荐透明度控制</div>
          <div class="details">
            <label :class="{'save2': form.recommend === 'yes', 'no-save3': form.recommend!== 'yes'}">
              <input type="radio" name="recommend" v-model="form.recommend" value="yes" hidden>
              显示 AI 备课推荐来源
            </label>
            <label :class="{'save3': form.recommend === 'no', 'no-save2': form.recommend!== 'no'}">
              <input type="radio" name="recommend" v-model="form.recommend" value="no" hidden>
              隐藏推荐来源
            </label>
            <div class="prompt">“AI 生成的教学内容将附带数据来源和推荐逻辑”</div>
          </div>
        </div>
        <div class="content-item">
          <div class="title3">数据清除</div>
          <div class="details">
            <el-button color="rgb(161, 126, 240)" round class="clear">一键清空历史备课记录</el-button>
          </div>
        </div>
      </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const form = ref({
  save: 'yes',
  recommend: 'yes',
})
</script>

<style scoped lang="less">
@import url('@/views/privacy/index.less');
</style>